<template>
  <Dialog
    v-model="dialogVisible"
    title="参数设置"
    width="700px"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      
    >
      <div class="section">
        <h3 class="section-title">材料单价取数来源</h3>
        <el-table
          :data="materialSources"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="key"
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column
            prop="source"
            label="成本来源"
            align="center"
          />
          <el-table-column
            label="是否取值"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              <el-checkbox
                v-model="row.enabled"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
            align="center"
          >
            <template #default="{ $index }">
              <el-button
                :icon="ArrowUp"
                size="small"
                @click="moveMaterialSource($index, 'up')"
                :disabled="$index === 0"
              />
              <el-button
                :icon="ArrowDown"
                size="small"
                @click="moveMaterialSource($index, 'down')"
                :disabled="$index === materialSources.length - 1"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="section">
        <h3 class="section-title">委外单价取数来源</h3>
        <el-table
          :data="outsourcingSources"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="key"
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column
            prop="source"
            label="成本来源"
            align="center"
          />
          <el-table-column
            label="是否取值"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              <el-checkbox
                v-model="row.enabled"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
            align="center"
          >
            <template #default>
              -
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="section">
        <el-col :span="10">
          <h3 class="section-title">用量取数来源</h3>
          <el-select v-model="usageSource" placeholder="请选择用量取数来源" style="width: 100%">
            <el-option
              label="单位用量（考虑损耗）"
              value="单位用量（考虑损耗）"
            />
            <el-option
              label="单位用量（不考虑损耗）"
              value="单位用量（不考虑损耗）"
            />
          </el-select>
        </el-col>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script  lang="ts" setup>
import { ref } from 'vue';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';

const dialogVisible = ref(false) // 弹窗的是否展示

const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:visible', 'cancel', 'save']);

// 材料单价取数来源数据
const materialSources = ref([
  { key: '1', source: '库存当前成本', enabled: true },
  { key: '2', source: '最近一次采购入库价', enabled: true },
  { key: '3', source: '商品参考成本', enabled: true }
]);

// 委外单价取数来源数据
const outsourcingSources = ref([
  { key: '1', source: '最近一次委外入库价', enabled: true }
]);

// 用量取数来源选择
const usageSource = ref('单位用量（考虑损耗）');

// 移动材料来源顺序
const moveMaterialSource = (index, direction) => {
  const newSources = [...materialSources.value];
  if (direction === 'up' && index > 0) {
    [newSources[index], newSources[index - 1]] = [newSources[index - 1], newSources[index]];
  } else if (direction === 'down' && index < newSources.length - 1) {
    [newSources[index], newSources[index + 1]] = [newSources[index + 1], newSources[index]];
  }
  materialSources.value = newSources;
};

// 关闭弹窗
const handleClose = (done) => {
  emit('cancel');
  done();
};

// 取消按钮
// const handleCancel = () => {
//   emit('update:visible', false);
//   emit('cancel');
// };

const formRef = ref() // 表单 Ref

const formData = ref({})
const handleSave = async () => {
  // 提交逻辑...
  try {
    await formRef.value.validate();
    console.log('表单数据:', formData.value);
    dialogVisible.value = false;
  } catch (error) {
    console.log('验证失败', error);
  }
};
// // 保存按钮
// const handleSave = () => {
//   emit('update:visible', false);
//   emit('save', {
//     materialSources: materialSources.value,
//     outsourcingSources: outsourcingSources.value,
//     usageSource: usageSource.value
//   });
// };

</script>

<style scoped>
.section {
  margin-bottom: 24px;
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #333;
  font-weight: normal;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 蓝色主题样式 */
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  margin-right: 0;
}

:deep(.el-dialog__title) {
  color: #409eff;
  font-weight: 600;
}

:deep(.el-button--primary) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #409eff;
  border-color: #409eff;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
  color: #409eff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #409eff;
  border-color: #409eff;
}
</style>
